<template>
	<view>

		<top></top>
		<view class="text">
			<view class="text_title">
				问答抽奖
			</view>
			<view class="list">
				<!-- <view class="rows" @tap="wenti">
					<image src="@/static/img/rows.png" class="rows_img" mode="widthFix"></image>
					<view class="list_title">红旗连锁（新济路）</view>
				</view> -->
				<view class="rows" v-for="(item, index) in AnswerRedArr" :key="index" @tap="wenti(item.Id)">
					<image :src="item.ImageSrc" class="rows_img" mode="widthFix"></image>
					<view class="list_title">{{ item.Merchant }}</view>
				</view>
			</view>

		</view>
		<redFoor></redFoor>
		<login></login>
		<!-- <wenti v-if="wen"></wenti> -->

		<!-- 添加隐私授权弹窗 -->
		<view class="privacy-mask" v-if="showPrivacy">
			<view class="privacy-dialog">
				<view class="privacy-title">用户隐私保护提示</view>
				<view class="privacy-content">
					<text>为了更好地为您提供服务，我们需要获取以下权限：</text>
					<text>1. 获取微信用户信息用于身份识别</text>
					<text>2. 获取微信支付权限用于红包发放</text>
					<text>您可以阅读我们的</text>
					<text class="privacy-link" @tap="showPrivacyDetail">《隐私政策》</text>
					<text>了解详细信息</text>
				</view>
				<view class="privacy-btns">
					<button class="privacy-btn reject" @tap="rejectPrivacy">暂不使用</button>
					<button class="privacy-btn accept" open-type="getPhoneNumber"
						@getphonenumber="acceptPrivacy">同意并继续</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import redFoor from '@/components/red/index.vue'
	import wenti from '@/components/red/wenti.vue'
	import top from '@/components/red/top.vue'
	import {
		GetNewComerIndexInfo
	} from "@/api/redquestion";
	import {
		GetPhoneNum
	} from "@/api/redwxuser";
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			redFoor,
			wenti,
			top
		},
		data() {
			return {
				wen: 0,
				AnswerRedArr: [],
				showPrivacy: false,
				hasPrivacyAuthorized: false
			}
		},
		computed: {
			...mapState('user', {
				currentOpenid: state => state.openid
			})
		},
		onLoad() {
			this.checkPrivacyAuthorization();
			this.getAnswerRed();
		},
		methods: {
			getAnswerRed() {
				console.log('Current openid:', this.currentOpenid) // 调试用
				GetNewComerIndexInfo({
						openid: this.currentOpenid
					})
					.then(res => {
						if (res != null) {
							let data = res.data.promotionUsersResponses;
							data = data.map(({
								promotionGroupId,
								promotionName,
								...rest
							}) => {
								return {
									Id: promotionGroupId + '',
									Merchant: promotionName,
									ImageSrc: "/static/img/rows.png"
								};
							});
							this.AnswerRedArr = data;
						}
					})
					.catch(res => {
						console.log(res);
					});
				// this.AnswerRedArr = [{
				// 		"Id": 1,
				// 		"ImageSrc": "/static/img/rows.png",
				// 		"Merchant": "红旗连锁1（新济路）"
				// 	},
				// 	{
				// 		"Id": 2,
				// 		"ImageSrc": "/static/img/rows.png",
				// 		"Merchant": "红旗连锁2（新济路）"
				// 	},
				// 	{
				// 		"Id": 3,
				// 		"ImageSrc": "/static/img/rows.png",
				// 		"Merchant": "红旗连锁3（新济路）"
				// 	},
				// 	{
				// 		"Id": 4,
				// 		"ImageSrc": "/static/img/rows.png",
				// 		"Merchant": "红旗连锁4（新济路）"
				// 	},
				// 	{
				// 		"Id": 5,
				// 		"ImageSrc": "/static/img/rows.png",
				// 		"Merchant": "红旗连锁5（新济路）"
				// 	},
				// ]

			},
			nato(url) {
				uni.navigateTo({
					url
				})
			},
			checkPrivacyAuthorization() {
				const hasAuthorized = uni.getStorageSync('privacyAuthorized');
				this.hasPrivacyAuthorized = hasAuthorized;
				if (!hasAuthorized) {
					this.showPrivacy = true;
					wx.login({
						success: res => {
							if (res.code) {
								this.code = res.code;
								// 发送 res.code 到开发者服务器
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			acceptPrivacy(e) {
				uni.setStorageSync('privacyAuthorized', true);
				this.hasPrivacyAuthorized = true;
				this.showPrivacy = false;
				debugger;
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					debugger;
					// 用户同意授权
					const encryptedData = e.detail.encryptedData;
					const iv = e.detail.iv;

					GetPhoneNum({
							encryptedData: encryptedData,
							iv: iv,
							code: this.code,
						})
						.then(res => {
							if (res != null) {
								let image_url = `${this.domain}${res.data.image_url}`;
								this.banner.image_input = image_url;
							}
						})
						.catch(res => {
							console.log(res);
						});
				} else {
					// 用户拒绝授权
					console.log('用户拒绝授权');
				}
			},
			rejectPrivacy() {
				uni.showToast({
					title: '需要同意隐私政策才能使用完整功能',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			showPrivacyDetail() {
				uni.navigateTo({
					url: '/pages/privacy/policy'
				});
			},
			wenti(id) {
				if (!this.hasPrivacyAuthorized) {
					this.showPrivacy = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/red/answers?id=' + id + '&name=uniapp'
				})
			},

		},
		mounted() {
			// 调试用
			console.log('Vuex state:', this.$store.state.user)
		}
	}
</script>

<style scoped>
	.text {
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
	}

	.text_title {
		color: #3D3D3D;
		font-weight: 600;
		margin-top: -5%;
		width: 100%;
	}

	.bg {
		width: 100%;
		height: 300upx;
	}

	.list {
		margin-top: 3%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: fixed;
		width: 88%;
		overflow-y: auto;
		height: 47%;
		/* bottom: 10%; */
	}

	.list_title {
		color: #3D3D3D;
		font-weight: 600;
		text-align: center;
		margin-top: 5%;
		margin-bottom: 5%;
	}

	.list .rows {
		width: 47%;
	}

	.rows_img {
		width: 100%;
	}

	.privacy-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.privacy-dialog {
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.privacy-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.privacy-content {
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}

	.privacy-content text {
		display: block;
		margin-bottom: 10rpx;
	}

	.privacy-link {
		color: #FC0000;
		display: inline;
	}

	.privacy-btns {
		display: flex;
		justify-content: space-between;
	}

	.privacy-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.privacy-btn.reject {
		background: #f5f5f5;
		color: #666;
	}

	.privacy-btn.accept {
		background: #FC0000;
		color: #fff;
	}
</style>